<template>
  <div class="container">
    <!-- 幻灯片 -->
    <div class="carousel">

      <el-carousel
        :interval="5000"
        arrow="always"
      >
        <el-carousel-item
          v-for="(item, index) in banners"
          :key="index"
        >
          <div
            class="banner-image"
            :style="`
                background:url(${$axios.defaults.baseURL+ item.url}) center center no-repeat;
                background-size:contain contain;
                `"
          >
          </div>
        </el-carousel-item>
      </el-carousel>

    </div>

  </div>
</template>

<script>
/* 
1 使用 axios 来发送异步请求 获取轮播图的数据
2 封装一个公共的url地址 (nuxt告诉你 我有!!! )
  nuxt.config.js中 有配置的入口


 */
export default {
  data() {
    return {
      // 轮播图数据
      banners: []
    };
  },
  mounted() {
    console.dir(this.$axios);
    this.$axios.get("/scenics/banners").then(res => {
      // console.log(res);
      this.banners = res.data.data;
    });
  }
};
</script>

<style scoped lang="less">
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;

  /deep/ .el-carousel__container {
    height: 700px;
  }

  .banner-image {
    width: 100%;
    height: 100%;
  }
}
</style>